<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh">
      <image src="../../../static/img/mybgc.png" mode="aspectFill" style="width: 100%; height: 480rpx"></image>
      <view class="title" :style="[top]">我的</view>
      <!-- 用户信息 -->
      <view class="userinfo" @click="gouserinfo">
        <view style="display: flex; align-items: center">
          <image
            :src="imgUrl + userinfo22.avatar"
            mode="aspectFill"
            style="width: 110rpx; height: 110rpx; border-radius: 100rpx 100rpx 100rpx 100rpx; opacity: 1; border: 2rpx solid #ffffff"
          ></image>
          <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #ffffff; margin-left: 30rpx">{{ userinfo22.teacher_name }}</view>
        </view>
        <uni-icons type="right" size="20" color="#fff"></uni-icons>
      </view>
      <!-- 订单、钱包、教师认证模块 -->
      <view class="order">
        <view class="orderitem" @click="gomyorder">
          <image src="../../../static/img/order.png" mode="aspectFill" style="width: 80rpx; height: 80rpx; margin-bottom: 12rpx"></image>
          <view>订单</view>
        </view>
        <view class="orderitem" @click="gowallit">
          <image src="../../../static/img/wallet.png" mode="aspectFill" style="width: 80rpx; height: 80rpx; margin-bottom: 12rpx"></image>
          <view>钱包</view>
        </view>
        <view class="orderitem" @click="gojsrz">
          <image src="../../../static/img/jsrzz.png" mode="aspectFill" style="width: 80rpx; height: 80rpx; margin-bottom: 12rpx"></image>
          <view>教师认证</view>
        </view>
      </view>

      <!-- 个人功能模块 -->
      <view class="usergn">
        <!-- 标题 -->
        <view class="title2">
          <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">个人功能</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <!-- 功能模块 -->
        <view style="display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 0 36rpx; margin-top: 60rpx">
          <view class="functionitem" @click="gomystudent">
            <image src="../../../static/img/mystudent.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">我的学生</view>
          </view>
          <view class="functionitem" @click="gomycollect">
            <image src="../../../static/img/mycollect.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">我的收藏</view>
          </view>
          <view class="functionitem" @click="gomydata">
            <image src="../../../static/img/mydata.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">我的资料</view>
          </view>
          <view class="functionitem" @click="gojiedansetting">
            <image src="../../../static/img/ordersetting.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">接单设置</view>
          </view>
          <view class="functionitem" @click="gomyevaluate">
            <image src="../../../static/img/pingjia.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">我的评价</view>
          </view>
          <view class="functionitem" @click="goblacklist">
            <image src="../../../static/img/blacklist.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">黑名单</view>
          </view>
          <view class="functionitem">
            <button open-type="contact">
              <image src="../../../static/img/mykefu.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
              <view class="name">我的客服</view>
            </button>
          </view>
          <view class="functionitem" @click="goparents">
            <image src="../../../static/img/toparent.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">家长端</view>
          </view>
        </view>
      </view>
      <!-- 协议设置等 -->
      <view class="xieyi">
        <view class="xieyiitem" @click="goquestions">
          <view class="navtitle">疑问答疑</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="xieyiitem" @click="goysxy">
          <view class="navtitle">隐私协议</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="xieyiitem" @click="gofwxy">
          <view class="navtitle">服务协议</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>

        <view class="xieyiitem" @click="gojsjdxy">
          <view class="navtitle">教师接单协议</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="xieyiitem" @click="gojsrzxy">
          <view class="navtitle">教师入驻协议</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>

        <view class="xieyiitem" @click="gohezuo">
          <view class="navtitle">商务合作</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="xieyiitem" @click="clear">
          <view class="navtitle">清理缓存</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="xieyiitem" @click="gozxxy">
          <view class="navtitle">注销协议</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="xieyiitem" @click="gosetting">
          <view class="navtitle">账号设置</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <view style="width: 750rpx; height: 100rpx"></view>
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState({
      userinfo22: (state) => state.userinfo
    })
  },
  data() {
    return {
      info: {}, // 用户信息
      imgUrl: '',
      isiphone: false,
      top: {
        paddingTop: '0rpx'
      }
    };
  },
  methods: {
    //获取用户信息
    async getuserinfo() {
      const res = await uni.$http.post('/user/profile');
      console.log('用户信息', res);
      this.info = res.data.data;
    },
    // 跳转到个人信息
    gouserinfo() {
      uni.navigateTo({
        url: '/teacher/userinfo/userinfo'
      });
    },
    // 清除缓存
    clear() {
      uni.clearStorage();
      uni.showToast({
        title: '缓存已全部清理'
      });
    },
    // 跳转到我的订单
    gomyorder() {
      uni.navigateTo({
        url: '/teacher/myorder/myorder'
      });
    },
    // 跳转到我的钱包
    gowallit() {
      uni.navigateTo({
        url: '/teacher/wallit/wallit'
      });
    },
    // 跳转到我的学生
    gomystudent() {
      uni.navigateTo({
        url: '/teacher/mystudents/mystudents'
      });
    },
    // 跳转到我的收藏
    gomycollect() {
      uni.navigateTo({
        url: '/teacher/mycollect/mycollect'
      });
    },
    // 跳转到黑名单
    goblacklist() {
      uni.navigateTo({
        url: '/teacher/blacklist/blacklist'
      });
    },
    // 跳转到我的评价
    gomyevaluate() {
      uni.navigateTo({
        url: '/teacher/myevaluate/myevaluate'
      });
    },
    // 跳转到教师接单协议
    gojsjdxy() {
      uni.navigateTo({
        url: '/pages/jsjdxy/jsjdxy'
      });
    },
    // 跳转到教师入住协议
    gojsrzxy() {
      uni.navigateTo({
        url: '/pages/jsrzxy/jsrzxy'
      });
    },
    // 跳转到隐私协议
    goysxy() {
      uni.navigateTo({
        url: '/pages/ysxy/ysxy'
      });
    },
    // 跳转到服务协议
    gofwxy() {
      uni.navigateTo({
        url: '/pages/fwxy/fwxy'
      });
    },
    // 跳转到商务合作
    gohezuo() {
      uni.navigateTo({
        url: '/pages/swhz/swhz'
      });
    },
    // 跳转到注销协议
    gozxxy() {
      uni.navigateTo({
        url: '/pages/zxxy/zxxy'
      });
    },
    // 跳转到账号设置
    gosetting() {
      uni.navigateTo({
        url: '/pages/setting/setting'
      });
    },
    // 跳转到疑问答疑
    goquestions() {
      uni.navigateTo({
        url: '/pages/question/question'
      });
    },
    // 跳转到我的资料
    gomydata() {
      uni.navigateTo({
        url: '/teacher/mydata/mydata'
      });
    },
    // 跳转到教师认证
    gojsrz() {
      uni.navigateTo({
        url: '/teacher/editorjsrz/editorjsrz'
      });
    },
    // 跳转到接单设置
    gojiedansetting() {
      uni.navigateTo({
        url: '/teacher/jiedansetting/jiedansetting'
      });
    },
    // 跳转到家长端
    goparents() {
      uni.reLaunch({
        url: '/pages/index/index?status=' + 1
      });
    }
  },
  created() {
    // 获取用户信息
    this.getuserinfo();
    this.imgUrl = this.imgurl;
    const app = getApp();
    console.log(app);
    console.log(app.$vm.isIPhone);
    this.isiphone = app.$vm.isIPhone;
    if (this.isiphone) {
      this.top.paddingTop = app.$vm.liuhai + 'rpx';
    }
  },
  mounted() {
    // 获取用户信息
    this.getuserinfo();
  }
};
</script>

<style lang="scss" scoped>
button {
  padding: 0;
  margin: 0;
  background-color: transparent;
  line-height: 38rpx;
}
button::after {
  border: none;
}
.container {
  box-sizing: border-box;
  .title {
    position: absolute;
    top: 60rpx;
    left: 345rpx;
    color: #fff;
  }
  .userinfo {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 200rpx;
    left: 0rpx;
    align-items: center;
    width: 100%;
    padding: 0 60rpx;
  }
  .order {
    display: flex;
    justify-content: space-around;
    position: absolute;
    top: 350rpx;
    left: 0;
    box-sizing: border-box;
    width: 710rpx;
    height: 190rpx;
    margin: 20rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .orderitem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  .usergn {
    box-sizing: border-box;
    width: 710rpx;
    height: 417rpx;
    margin: 20rpx;
    margin-top: 105rpx;
    padding: 30rpx 0;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .title2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30rpx;
    }
  }
  .functionitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25%;
    margin-bottom: 38rpx;

    .name {
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #222222;
    }
  }
  .xieyi {
    box-sizing: border-box;
    margin: 20rpx;
    margin-top: 0;
    padding: 30rpx;
    width: 710rpx;
    height: 760rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .xieyiitem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40rpx;
      .navtitle {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #222222;
      }
    }
  }
}
</style>
<style>
page {
  background-color: #f9f9f9;
}
</style>
